<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>webdoc</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            webdoc
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li class="active"><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-dva.html">30.cms-10-dva</a></li><li><a href="../html/30.cms-11-front.html">30.cms-11-front</a></li><li><a href="../html/31.cms-12-api.html">31.cms-12-api</a></li><li><a href="../html/31.cms-13-front.html">31.cms-13-front</a></li><li><a href="../html/31.cms-14-deploy.html">31.cms-14-deploy</a></li><li><a href="../html/32.ant.html">32.ant</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 安装 dva-cli 并创建应用">1. 安装 dva-cli 并创建应用</a></li><li><a href="#t12. 配置mock数据">2. 配置mock数据</a></li><li><a href="#t23. 渲染用户管理页面">3. 渲染用户管理页面</a><ul><li><a href="#t33.1 mock/users.js">3.1 mock/users.js</a></li><li><a href="#t43.2 src/utils/request.js">3.2 src/utils/request.js</a></li><li><a href="#t53.3 src/pages/users/index.js">3.3 src/pages/users/index.js</a></li><li><a href="#t63.4 services/users.js">3.4 services/users.js</a></li><li><a href="#t73.5 models/users.js">3.5 models/users.js</a></li><li><a href="#t83.6 components/Users.js">3.6 components/Users.js</a></li></ul></li><li><a href="#t94. 添加导航">4. 添加导航</a><ul><li><a href="#t104.1 src/layouts/index.js">4.1 src/layouts/index.js</a></li></ul></li><li><a href="#t115. 处理loading">5. 处理loading</a><ul><li><a href="#t125.1 Users.js">5.1 Users.js</a></li></ul></li><li><a href="#t136. 添加用户">6. 添加用户</a><ul><li><a href="#t146.1 mock/users.js">6.1 mock/users.js</a></li><li><a href="#t156.2 models/users.js">6.2 models/users.js</a></li><li><a href="#t166.3 services/users.js">6.3 services/users.js</a></li><li><a href="#t176.4 users/components/Users.js">6.4 users/components/Users.js</a></li></ul></li><li><a href="#t187.分页查询">7.分页查询</a><ul><li><a href="#t197.1 mock/users.js">7.1 mock/users.js</a></li><li><a href="#t207.2 models/users.js">7.2 models/users.js</a></li><li><a href="#t217.3 services/users.js">7.3 services/users.js</a></li><li><a href="#t227.4 components/Users.js">7.4 components/Users.js</a></li></ul></li><li><a href="#t238. 删除用户">8. 删除用户</a><ul><li><a href="#t248.1 mock/users.js">8.1 mock/users.js</a></li><li><a href="#t258.2 models/users.js">8.2 models/users.js</a></li><li><a href="#t268.3 services/users.js">8.3 services/users.js</a></li><li><a href="#t278.4 components/Users.js">8.4 components/Users.js</a></li></ul></li><li><a href="#t289. 编辑用户">9. 编辑用户</a><ul><li><a href="#t299.1 mock/users.js">9.1 mock/users.js</a></li><li><a href="#t309.2 models/users.js">9.2 models/users.js</a></li><li><a href="#t319.3 services/users.js">9.3 services/users.js</a></li><li><a href="#t329.4 components/Users.js">9.4 components/Users.js</a></li></ul></li><li><a href="#t3310. 多选用户">10. 多选用户</a><ul><li><a href="#t3410.1 components/Users.js">10.1 components/Users.js</a></li><li><a href="#t3510.2 models/users.js">10.2 models/users.js</a></li></ul></li><li><a href="#t3611. 参考">11. 参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. &#x5B89;&#x88C5; dva-cli &#x5E76;&#x521B;&#x5EFA;&#x5E94;&#x7528;">1. &#x5B89;&#x88C5; dva-cli &#x5E76;&#x521B;&#x5EFA;&#x5E94;&#x7528; <a href="#t01. &#x5B89;&#x88C5; dva-cli &#x5E76;&#x521B;&#x5EFA;&#x5E94;&#x7528;"> # </a></h2>
<pre><code class="lang-js">$ npm i dva-cli@next -g
$ dva -v
<span class="hljs-number">1.0</span><span class="hljs-number">.0</span>-beta<span class="hljs-number">.2</span>
$ dva <span class="hljs-keyword">new</span> zhufeng-user-managment
$ cd zhufeng-user-managment
</code></pre>
<h2 id="t12. &#x914D;&#x7F6E;mock&#x6570;&#x636E;">2. &#x914D;&#x7F6E;mock&#x6570;&#x636E; <a href="#t12. &#x914D;&#x7F6E;mock&#x6570;&#x636E;"> # </a></h2>
<p>mock/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-comment">// &#x652F;&#x6301;&#x503C;&#x4E3A; Object &#x548C; Array</span>
    <span class="hljs-string">&apos;GET /api/users&apos;</span>: { <span class="hljs-attr">users</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>] },

    <span class="hljs-comment">// GET POST &#x53EF;&#x7701;&#x7565;</span>
    <span class="hljs-string">&apos;/api/users/1&apos;</span>: { <span class="hljs-attr">id</span>: <span class="hljs-number">1</span> },

    <span class="hljs-comment">// &#x652F;&#x6301;&#x81EA;&#x5B9A;&#x4E49;&#x51FD;&#x6570;&#xFF0C;API &#x53C2;&#x8003; express@4</span>
    <span class="hljs-string">&apos;POST /api/users/create&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req, res</span>) =&gt;</span> { res.end(<span class="hljs-string">&apos;OK&apos;</span>); },
  };
</code></pre>
<h2 id="t23. &#x6E32;&#x67D3;&#x7528;&#x6237;&#x7BA1;&#x7406;&#x9875;&#x9762;">3. &#x6E32;&#x67D3;&#x7528;&#x6237;&#x7BA1;&#x7406;&#x9875;&#x9762; <a href="#t23. &#x6E32;&#x67D3;&#x7528;&#x6237;&#x7BA1;&#x7406;&#x9875;&#x9762;"> # </a></h2>
<h3 id="t33.1 mock/users.js">3.1 mock/users.js <a href="#t33.1 mock/users.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-string">&apos;GET /api/users&apos;</span>: {
    <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
    <span class="hljs-attr">data</span>: {
      <span class="hljs-attr">list</span>: [
        {<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx1&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx1@qq.com&apos;</span>},
        {<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx2&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx2@qq.com&apos;</span>},
        {<span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx3&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx3@qq.com&apos;</span>}
      ]
    }
  }
};
</code></pre>
<h3 id="t43.2 src/utils/request.js">3.2 src/utils/request.js <a href="#t43.2 src/utils/request.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> fetch <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/fetch&apos;</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">parseJSON</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">return</span> response.json();
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkCode</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.code == <span class="hljs-number">0</span>) {
    <span class="hljs-keyword">return</span> response.data;
  }
  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.error);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkStatus</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.status &gt;= <span class="hljs-number">200</span> &amp;&amp; response.status &lt; <span class="hljs-number">300</span>) {
    <span class="hljs-keyword">return</span> response;
  }

  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.statusText);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}


<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">request</span>(<span class="hljs-params">url, options</span>) </span>{
  <span class="hljs-keyword">return</span> fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(checkCode)
    .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> ({ err }));
}
</code></pre>
<h3 id="t53.3 src/pages/users/index.js">3.3 src/pages/users/index.js <a href="#t53.3 src/pages/users/index.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> Users <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./components/Users&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> () =&gt; {
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Users</span>/&gt;</span></span>
    )
}
</code></pre>
<h3 id="t63.4 services/users.js">3.4 services/users.js <a href="#t63.4 services/users.js"> # </a></h3>
<p>src/pages/users/services/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../utils/request&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/users`</span>);
}
</code></pre>
<h3 id="t73.5 models/users.js">3.5 models/users.js <a href="#t73.5 models/users.js"> # </a></h3>
<p>src/pages/users/models/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> usersService <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/users&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: <span class="hljs-string">&apos;users&apos;</span>,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: []
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{<span class="hljs-attr">payload</span>:{list}}) {
            <span class="hljs-keyword">return</span> {...state,list};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch(action,{call,put}) {
            <span class="hljs-keyword">const</span> {list} = <span class="hljs-keyword">yield</span> call(usersService.fetch);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">&apos;/users&apos;</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t83.6 components/Users.js">3.6 components/Users.js <a href="#t83.6 components/Users.js"> # </a></h3>
<p>src/pages/users/components/Users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Users</span>(<span class="hljs-params">{list,dispatch}</span>) </span>{
    <span class="hljs-keyword">const</span> columns=[
        {
            <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
            <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
            <span class="hljs-attr">key</span>:<span class="hljs-string">&apos;name&apos;</span>
        },
        {
            <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
            <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
            <span class="hljs-attr">key</span>:<span class="hljs-string">&apos;email&apos;</span>
        },
        {
            <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
            <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
            <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,row</span>) =&gt;</span> (
                <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>
                    &#x7F16;&#x8F91;
                <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
            )
        }
    ]
    <span class="hljs-keyword">return</span> (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Card</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Table</span>
                <span class="hljs-attr">columns</span>=<span class="hljs-string">{columns}</span>
                <span class="hljs-attr">dataSource</span>=<span class="hljs-string">{list}</span>
                <span class="hljs-attr">rowKey</span>=<span class="hljs-string">{record</span> =&gt;</span> record.id}
            /&gt;
        <span class="hljs-tag">&lt;/<span class="hljs-name">Card</span>&gt;</span>
    )
}
export default connect(
    state =&gt; state.users
)(Users);
</span></code></pre>
<h2 id="t94. &#x6DFB;&#x52A0;&#x5BFC;&#x822A;">4. &#x6DFB;&#x52A0;&#x5BFC;&#x822A; <a href="#t94. &#x6DFB;&#x52A0;&#x5BFC;&#x822A;"> # </a></h2>
<h3 id="t104.1 src/layouts/index.js">4.1 src/layouts/index.js <a href="#t104.1 src/layouts/index.js"> # </a></h3>
<p>src/layouts/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Layout,Menu} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> Link <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;umi/link&apos;</span>;
<span class="hljs-keyword">const</span> {Header,Content,Footer}=Layout;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">props</span>) </span>{
    <span class="hljs-keyword">return</span> (
        &lt;Layout&gt;
            &lt;Header&gt;
                &lt;Menu
                    theme=&quot;dark&quot;
                    mode=&quot;horizontal&quot;
                    defaultSelectedKeys={[&quot;/&quot;]}
                    style={{lineHeight:&apos;64px&apos;}}
                &gt;
                    &lt;Menu.Item key=&quot;/&quot;&gt;&lt;Link to=&quot;/&quot;&gt;&#x9996;&#x9875;&lt;/Link&gt;&lt;/Menu.Item&gt;
                    &lt;Menu.Item key=&quot;/users&quot;&gt;&lt;Link to=&quot;/users&quot;&gt;&#x7528;&#x6237;&#x7BA1;&#x7406;&lt;/Link&gt;&lt;/Menu.Item&gt;
                &lt;/Menu&gt;
            &lt;/Header&gt;
            &lt;Content&gt;
                {props.children}
            &lt;/Content&gt;
        &lt;/Layout&gt;
    )
}
</code></pre>
<h2 id="t115. &#x5904;&#x7406;loading">5. &#x5904;&#x7406;loading <a href="#t115. &#x5904;&#x7406;loading"> # </a></h2>
<h3 id="t125.1 Users.js">5.1 Users.js <a href="#t125.1 Users.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Users</span>(<span class="hljs-params">{list,loading,dispatch}</span>) </span>{
    <span class="hljs-keyword">const</span> columns=[
        {
            <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
            <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
            <span class="hljs-attr">key</span>:<span class="hljs-string">&apos;name&apos;</span>
        },
        {
            <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
            <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
            <span class="hljs-attr">key</span>:<span class="hljs-string">&apos;email&apos;</span>
        },
        {
            <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
            <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
            <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,row</span>) =&gt;</span> (
                <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>
                    &#x7F16;&#x8F91;
                <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
            )
        }
    ]
    <span class="hljs-keyword">return</span> (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Card</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">Table</span>
                <span class="hljs-attr">columns</span>=<span class="hljs-string">{columns}</span>
                <span class="hljs-attr">dataSource</span>=<span class="hljs-string">{list}</span>
                <span class="hljs-attr">loading</span>=<span class="hljs-string">{loading}</span>
                <span class="hljs-attr">rowKey</span>=<span class="hljs-string">{record</span> =&gt;</span> record.id}
            /&gt;
        <span class="hljs-tag">&lt;/<span class="hljs-name">Card</span>&gt;</span>
    )
}
export default connect(
    state =&gt; ({...state.users,loading:state.loading.models.users})
)(Users);
</span></code></pre>
<h2 id="t136. &#x6DFB;&#x52A0;&#x7528;&#x6237;">6. &#x6DFB;&#x52A0;&#x7528;&#x6237; <a href="#t136. &#x6DFB;&#x52A0;&#x7528;&#x6237;"> # </a></h2>
<h3 id="t146.1 mock/users.js">6.1 mock/users.js <a href="#t146.1 mock/users.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> list=[
  {<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx1&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx1@qq.com&apos;</span>},
  {<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx2&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx2@qq.com&apos;</span>},
  {<span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx3&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx3@qq.com&apos;</span>}
]
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-string">&apos;GET /api/users&apos;</span>: {
    <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
    <span class="hljs-attr">data</span>: {
      list 
    }
  },

  <span class="hljs-string">&apos;POST /api/users&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> buffers=[];
    req.on(<span class="hljs-string">&apos;data&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
      buffers.push(data);
    });
    req.on(<span class="hljs-string">&apos;end&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">let</span> body=Buffer.concat(buffers).toString();
      <span class="hljs-keyword">let</span> newUser=<span class="hljs-built_in">JSON</span>.parse(body);
      newUser.id=list.length&gt;<span class="hljs-number">0</span>?list[list.length<span class="hljs-number">-1</span>].id+<span class="hljs-number">1</span>:<span class="hljs-number">1</span>;
      list.push(newUser);
      res.end(<span class="hljs-built_in">JSON</span>.stringify({
        <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x6DFB;&#x52A0;&#x6210;&#x529F;&apos;</span>
      }));
    });
  },
};
</code></pre>
<h3 id="t156.2 models/users.js">6.2 models/users.js <a href="#t156.2 models/users.js"> # </a></h3>
<p>pages/users/models/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> usersService <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/users&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: <span class="hljs-string">&apos;users&apos;</span>,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>,
        <span class="hljs-attr">record</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch(action,{call,put}) {
            <span class="hljs-keyword">const</span> {list} = <span class="hljs-keyword">yield</span> call(usersService.fetch);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(usersService.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">&apos;/users&apos;</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t166.3 services/users.js">6.3 services/users.js <a href="#t166.3 services/users.js"> # </a></h3>
<p>src/pages/users/services/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../utils/request&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/users`</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/users`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
</code></pre>
<h3 id="t176.4 users/components/Users.js">6.4 users/components/Users.js <a href="#t176.4 users/components/Users.js"> # </a></h3>
<p>src/pages/users/components/Users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Popconfirm,Modal,Form,Input,message} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.users,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/create&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,row</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>
                        &#x7F16;&#x8F91;
                    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h2 id="t187.&#x5206;&#x9875;&#x67E5;&#x8BE2;">7.&#x5206;&#x9875;&#x67E5;&#x8BE2; <a href="#t187.&#x5206;&#x9875;&#x67E5;&#x8BE2;"> # </a></h2>
<h3 id="t197.1 mock/users.js">7.1 mock/users.js <a href="#t197.1 mock/users.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> list=[
  {<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx1&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx1@qq.com&apos;</span>},
  {<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx2&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx2@qq.com&apos;</span>},
  {<span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx3&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx3@qq.com&apos;</span>}
]
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-string">&apos;GET /api/users&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> {page=<span class="hljs-number">1</span>,limit=<span class="hljs-number">3</span>}=req.query;
    res.end(<span class="hljs-built_in">JSON</span>.stringify({
      <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">total</span>: list.length,
        <span class="hljs-attr">list</span>:list.slice((page<span class="hljs-number">-1</span>)*limit,page*limit)
      }
    }));
  },
  <span class="hljs-string">&apos;POST /api/users&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> buffers=[];
    req.on(<span class="hljs-string">&apos;data&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
      buffers.push(data);
    });
    req.on(<span class="hljs-string">&apos;end&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">let</span> body=Buffer.concat(buffers).toString();
      <span class="hljs-keyword">let</span> newUser=<span class="hljs-built_in">JSON</span>.parse(body);
      newUser.id=list.length&gt;<span class="hljs-number">0</span>?list[list.length<span class="hljs-number">-1</span>].id+<span class="hljs-number">1</span>:<span class="hljs-number">1</span>;
      list.push(newUser);
      res.end(<span class="hljs-built_in">JSON</span>.stringify({
        <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x6DFB;&#x52A0;&#x6210;&#x529F;&apos;</span>
      }));
    });
  },
};
</code></pre>
<h3 id="t207.2 models/users.js">7.2 models/users.js <a href="#t207.2 models/users.js"> # </a></h3>
<p>src/pages/users/models/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> usersService <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/users&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: <span class="hljs-string">&apos;users&apos;</span>,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {page=<span class="hljs-number">1</span>}},{call,put}) {
            <span class="hljs-keyword">const</span> {list,total} = <span class="hljs-keyword">yield</span> call(usersService.fetch,page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list,<span class="hljs-attr">page</span>:<span class="hljs-built_in">parseInt</span>(page),total}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(usersService.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">&apos;/users&apos;</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>:query});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t217.3 services/users.js">7.3 services/users.js <a href="#t217.3 services/users.js"> # </a></h3>
<p>users/services/users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> usersService <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/users&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: <span class="hljs-string">&apos;users&apos;</span>,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {page=<span class="hljs-number">1</span>}},{call,put}) {
            <span class="hljs-keyword">const</span> {list,total} = <span class="hljs-keyword">yield</span> call(usersService.fetch,page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list,<span class="hljs-attr">page</span>:<span class="hljs-built_in">parseInt</span>(page),total}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(usersService.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">&apos;/users&apos;</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>:query});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t227.4 components/Users.js">7.4 components/Users.js <a href="#t227.4 components/Users.js"> # </a></h3>
<p>src/pages/users/components/Users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-comment">//import router from &apos;umi/router&apos;;</span>
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.users,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/create&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,row</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>
                        &#x7F16;&#x8F91;
                    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/users?page=${page}`);</span>
                dispatch(routerRedux.push(<span class="hljs-string">`/users?page=<span class="hljs-subst">${page}</span>`</span>));
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/users&apos;</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h2 id="t238. &#x5220;&#x9664;&#x7528;&#x6237;">8. &#x5220;&#x9664;&#x7528;&#x6237; <a href="#t238. &#x5220;&#x9664;&#x7528;&#x6237;"> # </a></h2>
<h3 id="t248.1 mock/users.js">8.1 mock/users.js <a href="#t248.1 mock/users.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> list=[
  {<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx1&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx1@qq.com&apos;</span>},
  {<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx2&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx2@qq.com&apos;</span>},
  {<span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx3&apos;</span>,<span class="hljs-attr">email</span>:<span class="hljs-string">&apos;zfpx3@qq.com&apos;</span>}
]
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-string">&apos;GET /api/users&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> {page=<span class="hljs-number">1</span>,limit=<span class="hljs-number">3</span>}=req.query;
    res.end(<span class="hljs-built_in">JSON</span>.stringify({
      <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">data</span>: {
        <span class="hljs-attr">total</span>: list.length,
        <span class="hljs-attr">list</span>:list.slice((page<span class="hljs-number">-1</span>)*limit,page*limit)
      }
    }));
  },
  <span class="hljs-string">&apos;DELETE /api/users/:id&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> {id}=req.params;
    list = list.filter(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.id != id);
    res.end(<span class="hljs-built_in">JSON</span>.stringify({
      <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
      <span class="hljs-attr">data</span>: <span class="hljs-string">&quot;&#x5220;&#x9664;&#x6210;&#x529F;!&quot;</span>
    }));
  },
  <span class="hljs-string">&apos;POST /api/users&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> buffers=[];
    req.on(<span class="hljs-string">&apos;data&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
      buffers.push(data);
    });
    req.on(<span class="hljs-string">&apos;end&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">let</span> body=Buffer.concat(buffers).toString();
      <span class="hljs-keyword">let</span> newUser=<span class="hljs-built_in">JSON</span>.parse(body);
      newUser.id=list.length&gt;<span class="hljs-number">0</span>?list[list.length<span class="hljs-number">-1</span>].id+<span class="hljs-number">1</span>:<span class="hljs-number">1</span>;
      list.push(newUser);
      res.end(<span class="hljs-built_in">JSON</span>.stringify({
        <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x6DFB;&#x52A0;&#x6210;&#x529F;&apos;</span>
      }));
    });
  },
};
</code></pre>
<h3 id="t258.2 models/users.js">8.2 models/users.js <a href="#t258.2 models/users.js"> # </a></h3>
<p>src/pages/users/models/users.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+        *del({payload},{call,put}) {</span>
<span class="hljs-addition">+            yield call(usersService.del,payload);</span>
<span class="hljs-addition">+            yield put({type: &apos;fetch&apos;,payload: {page:1}});</span>
<span class="hljs-addition">+        }</span>
</code></pre>
<h3 id="t268.3 services/users.js">8.3 services/users.js <a href="#t268.3 services/users.js"> # </a></h3>
<p>src/pages/users/services/users.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ export function del(id) {</span>
<span class="hljs-addition">+     return request(`/api/users/${id}`,{</span>
<span class="hljs-addition">+         method: &apos;DELETE&apos;</span>
<span class="hljs-addition">+ });</span>
</code></pre>
<h3 id="t278.4 components/Users.js">8.4 components/Users.js <a href="#t278.4 components/Users.js"> # </a></h3>
<p>src/pages/users/components/Users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-comment">//import router from &apos;umi/router&apos;;</span>
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.users,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/create&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/del&apos;</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x7528;&#x6237;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/users?page=${page}`);</span>
                dispatch(routerRedux.push(<span class="hljs-string">`/users?page=<span class="hljs-subst">${page}</span>`</span>));
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/users&apos;</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h2 id="t289. &#x7F16;&#x8F91;&#x7528;&#x6237;">9. &#x7F16;&#x8F91;&#x7528;&#x6237; <a href="#t289. &#x7F16;&#x8F91;&#x7528;&#x6237;"> # </a></h2>
<h3 id="t299.1 mock/users.js">9.1 mock/users.js <a href="#t299.1 mock/users.js"> # </a></h3>
<pre><code class="lang-js">  <span class="hljs-string">&apos;PATCH /api/users&apos;</span>: <span class="hljs-function">(<span class="hljs-params">req,res</span>) =&gt;</span> {
    <span class="hljs-keyword">let</span> buffers=[];
    req.on(<span class="hljs-string">&apos;data&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
      buffers.push(data);
    });
    req.on(<span class="hljs-string">&apos;end&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
      <span class="hljs-keyword">let</span> body=Buffer.concat(buffers).toString();
      <span class="hljs-keyword">let</span> updateUser=<span class="hljs-built_in">JSON</span>.parse(body);
      list = list.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (item.id==updateUser.id) {
          <span class="hljs-keyword">return</span> updateUser;
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">return</span> item;
        }
      });
      res.end(<span class="hljs-built_in">JSON</span>.stringify({
        <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x6DFB;&#x52A0;&#x6210;&#x529F;&apos;</span>
      }));
    });
  }
</code></pre>
<h3 id="t309.2 models/users.js">9.2 models/users.js <a href="#t309.2 models/users.js"> # </a></h3>
<p>src/pages/users/models/users.js</p>
<pre><code class="lang-diff">            yield put({type: &apos;fetch&apos;,payload: {page:1}});
            yield put({type:&apos;save&apos;,payload:{editVisible:false}});
        },
<span class="hljs-addition">+        *update({payload},{call,put,select}) {</span>
<span class="hljs-addition">+            yield call(usersService.update,payload);</span>
<span class="hljs-addition">+            let page=yield select(state=&gt;state.users.page);</span>
<span class="hljs-addition">+            yield put({type: &apos;fetch&apos;,payload: {page}});</span>
<span class="hljs-addition">+            yield put({type:&apos;save&apos;,payload:{editVisible:false}});</span>
<span class="hljs-addition">+        },</span>
        *del({payload},{call,put}) {
            yield call(usersService.del,payload);
            yield put({type: &apos;fetch&apos;,payload: {page:1}});
</code></pre>
<h3 id="t319.3 services/users.js">9.3 services/users.js <a href="#t319.3 services/users.js"> # </a></h3>
<p>src/pages/users/services/users.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ export function update(values) {</span>
<span class="hljs-addition">+     return request(`/api/users`,{</span>
<span class="hljs-addition">+         method: &apos;PATCH&apos;,</span>
<span class="hljs-addition">+         body:JSON.stringify(values)</span>
<span class="hljs-addition">+     });</span>
}
</code></pre>
<h3 id="t329.4 components/Users.js">9.4 components/Users.js <a href="#t329.4 components/Users.js"> # </a></h3>
<p>src/pages/users/components/Users.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-comment">//import router from &apos;umi/router&apos;;</span>
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.users,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">&apos;users/create&apos;</span>:<span class="hljs-string">&apos;users/update&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/del&apos;</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x7528;&#x6237;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/users?page=${page}`);</span>
                dispatch(routerRedux.push(<span class="hljs-string">`/users?page=<span class="hljs-subst">${page}</span>`</span>));
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/users&apos;</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h2 id="t3310. &#x591A;&#x9009;&#x7528;&#x6237;">10. &#x591A;&#x9009;&#x7528;&#x6237; <a href="#t3310. &#x591A;&#x9009;&#x7528;&#x6237;"> # </a></h2>
<h3 id="t3410.1 components/Users.js">10.1 components/Users.js <a href="#t3410.1 components/Users.js"> # </a></h3>
<p>src/pages/users/components/Users.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+        const rowSelection={</span>
<span class="hljs-addition">+            type: &apos;checkbox&apos;,</span>
<span class="hljs-addition">+            selectedRowKeys: this.props.selectedRowKeys,</span>
<span class="hljs-addition">+            onChange: (selectedRowKeys,selectedRows) =&gt; {</span>
<span class="hljs-addition">+                this.save({selectedRowKeys});</span>
<span class="hljs-addition">+            }</span>
<span class="hljs-addition">+        }</span>

            loading={loading}
            rowKey={record =&gt; record.id}
            pagination={pagination}
<span class="hljs-addition">+            rowSelection={rowSelection}</span>
        /&gt;
</code></pre>
<h3 id="t3510.2 models/users.js">10.2 models/users.js <a href="#t3510.2 models/users.js"> # </a></h3>
<p>src/pages/users/models/users.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+        selectedRowKeys:[]</span>
</code></pre>
<h2 id="t3611. &#x53C2;&#x8003;">11. &#x53C2;&#x8003; <a href="#t3611. &#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="https://umijs.org/zh/guide/">umijs</a></li>
<li><a href="https://gitee.com/zhufengpeixun/zhufeng-user-management.git">zhufeng-user-management</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
